import React from 'react';
import {Layout, Select, DatePicker, Input, Table, Menu, Dropdown, Modal, message} from 'antd'
import WithMon from './with-mon'
import {CopyOutlined, FileExcelOutlined, PayCircleOutlined} from '@ant-design/icons';
import './Voucher.css'
import {observer,inject} from 'mobx-react'
import moneyMan from "../../../store/MoneyMan/MoneyMan";
import axios from '../../../util/http'
import * as url from '../../../util/api'
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;

// let selectValue = '';




function onChange(pagination, filters, sorter, extra) {
    console.log('params', pagination, filters, sorter, extra);
}
function handleChange(value) {
    console.log(`selected ${value}`);
    // selectValue =`selected ${value}`
}
//退款确认
@inject('moneyMan')
@observer
class RefundSure extends React.Component {
    constructor(props){
        super(props)
        this.state={
            getData:[],
            RefundNum: '',//单号
            customerName: '',//客户名称
            dataTime: '',//时间
            RefundMoney:'',//金额
            WhyRefund: '',//原因
            visibleA:false,//详情
            visibleB:false,//确认收款
            visibleC:false,//作废收款
        }
    }

    componentDidMount() {
        axios({
            url:url.getRefundSure,
            method:'get',
        }).then(res=>{
            // console.log(res.data.data)
            this.setState({
                getData:res.data.data,
            })
        })
        // this.props.moneyMan.getRefundSure()
        // this.props.moneyMan.getRefundSure('hh').then(res=>{
        //     console.log(res)
        // })
    }
    handleOkA = e => {
        console.log(e);
        this.setState({
            visibleA: false,
        });
        message.success('确认成功');
    };
    handleCancelA = e => {
        // console.log(e);
        this.setState({
            visibleA: false,
        });
        message.success('取消成功');
    };
    handleOkB = e => {
        console.log(e);
        this.setState({
            visibleB: false,
        });
        message.success('确认成功');
    };
    handleCancelB = e => {
        console.log(e);
        this.setState({
            visibleB: false,
        });
        message.success('取消成功');
    };
    handleOkC = e => {
        console.log(e);
        this.setState({
            visibleC: false,
        });
        message.success('作废成功');
    };
    handleCancelC = e => {
        // console.log(e);
        this.setState({
            visibleC: false,
        });
        message.success('取消成功');
    };
     PDetails=(text,record,e)=> {
        e.preventDefault()
         let {RefundNum,dataTime,customerName,RefundMoney,WhyRefund}=text
         this.setState({
             RefundNum: RefundNum,
             customerName: customerName,
             dataTime: dataTime,
             RefundMoney:RefundMoney,
             WhyRefund: WhyRefund,
             visibleA:true,
         })

    }
    sureTui=(text,record,e)=> {
        e.preventDefault()
        let {RefundNum,dataTime,customerName,RefundMoney,WhyRefund}=text
        this.setState({
            RefundNum: RefundNum,
            customerName: customerName,
            dataTime: dataTime,
            RefundMoney:RefundMoney,
            WhyRefund: WhyRefund,
            visibleB:true,//作废收款
        })

    }
    sureDel=(text,record,e)=> {
        e.preventDefault()
        let {RefundNum,dataTime,customerName,RefundMoney,WhyRefund}=text
        this.setState({
            RefundNum: RefundNum,
            customerName: customerName,
            dataTime: dataTime,
            RefundMoney:RefundMoney,
            WhyRefund: WhyRefund,
            visibleC:true,//作废收款
        })


    }
    dropdownMenu=(text, record)=> {
        const menu = (
            <Menu>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.PDetails.bind(this,text,record)} >
                        <CopyOutlined style={{marginRight:'10px'}}/>详情
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.sureTui.bind(this,text,record)}>
                        <PayCircleOutlined style={{marginRight:'10px'}}/>确认退款
                    </a>
                </Menu.Item>
                <Menu.Item>
                    <a target="_blank" rel="noopener noreferrer" onClick={this.sureDel.bind(this,text,record)}>
                        <FileExcelOutlined style={{marginRight:'10px'}}/>作废
                    </a>
                </Menu.Item>
            </Menu>
        );
        return(
            <Dropdown overlay={menu}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()}>
                    . . .
                </a>
            </Dropdown>
        )
    }
    searchData=(value)=>{
         // console.log(value)
        let Data = this.state.getData
        if (value===''){
            axios({
                url:url.getRefundSure,
                method:'get',
            }).then(res=>{
                // console.log(res.data.data)
                this.setState({
                    getData:res.data.data,
                })
            })
        } else{
            let newData = Data.filter(item=>{
                return item.customerName===value
            })
            this.setState({
                getData:newData
            })
        }

    }
    render() {
        const columns = [
            {
                title: '单号',
                dataIndex: 'RefundNum',
                align:'center',
            },
            {
                title: '时间',
                dataIndex: 'dataTime',
                align:'center',
            },
            {
                title: '客户名称',
                dataIndex: 'customerName',
                align:'center',
            },
            {
                title: '退款金额',
                dataIndex: 'RefundMoney',
                align:'center',
            },
            {
                title: '退款原因',
                dataIndex: 'WhyRefund',
                align:'center',
            },
            {
                title: '操作',
                key: 'action',
                render: (text, record) => (
             <span>
                {this.dropdownMenu(text, record)}
            </span>
                ),
            },
        ];
        return (
            <div>
                <Layout style={{backgroundColor:'white',marginTop:'20px'}}>
                    <div className='topBox'>
                        <div className='topLeft'>
                            <Select bordered={false} style={{marginLeft:'10px',width:140,marginRight:'20px'}} defaultValue="全部收款账号"  onChange={handleChange}>
                                <Option value="全部收款账号">全部收款账号</Option>
                                <Option value="现金">现金</Option>
                            </Select>
                            <RangePicker style={{width:400,height:30}}/>
                            <Search
                                placeholder="请输入收款方名称/付款单号"
                                onSearch={this.searchData}
                                style={{width:400}}
                            />
                        </div>
                        <div className='MoneyRight'>
                            待确认退款合计：<span style={{color:'red'}}>0:00</span>
                        </div>
                    </div>
                </Layout>
                <div className='tableBox'>
                    <Table columns={columns} dataSource={this.state.getData} onChange={onChange} />
                </div>
                <Modal
                    title="订单退款"
                    visible={this.state.visibleA}
                    onOk={this.handleOkA}
                    onCancel={this.handleCancelA}
                    okText="确认退款"
                    cancelText="取消"
                >
                    <p><span className='huise'>单号：</span>{this.state.RefundNum}</p>
                    <p><span className='huise'>日期：</span>{this.state.dataTime}</p>
                    <p><span className='huise'>客户称：</span>{this.state.customerName}</p>
                    <p><span className='huise'>金额：</span>{this.state.RefundMoney}</p>
                    <p><span className='huise'>退款原因：</span>{this.state.WhyRefund}</p>
                    <p><span className='huise'>操作人：</span></p>
                </Modal>
                <Modal
                    title="退款确认"
                    visible={this.state.visibleB}
                    onOk={this.handleOkB}
                    onCancel={this.handleCancelB}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认将该笔款项标识为已收款？</p>
                    <p>客户名称：{this.state.customerName}</p>
                    <p>金额：{this.state.RefundMoney}</p>
                </Modal>
                <Modal
                    title="作废确认"
                    visible={this.state.visibleC}
                    onOk={this.handleOkC}
                    onCancel={this.handleCancelC}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确认作废该笔收款记录？</p>
                    <p>客户名称：{this.state.customerName}</p>
                    <p>金额：{this.state.RefundMoney}</p>
                </Modal>
            </div>
        );
    }
}

export default WithMon('退款确认')(RefundSure);